<template>
  <component :is="getComponentByName(themeConfig.layout)"/>
  <n-drawer v-model:show="showDrawer" :width="500" placement="right">
    <n-drawer-content title="系统设置">
      <h-z-system-set/>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// @ts-ignore
import Layout_1 from "/@page/home/view/Layout_1.vue";
// @ts-ignore
import Layout_2 from "/@page/home/view/Layout_2.vue";
import HZSystemSet from "/@page/home/component/HZSystemSet.vue";
import {useThemeConfig} from "/@bean/GlobalConfig";
import {storeToRefs} from "pinia";
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const showDrawer = ref(false);

// 监听键盘事件
window.addEventListener('keydown', (e) => {
  if (e.ctrlKey && e.altKey && e.code === 'KeyH') {
    showDrawer.value = true;
  }
});

// 根据名称返回组件
const getComponentByName = (name: string) => {
  switch (name) {
    case 'layout1':
      return Layout_1;
    default:
      return Layout_2;
  }
};


</script>

<style scoped lang="scss">

</style>